<template>
  <div class="tab-bar-wrapper">
    <van-tabbar fixed route>
      <van-tabbar-item to="" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/home/classify" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item
        to="/home/shopping"
        :badge="badge"
        icon="shopping-cart-o"
        id="shop-car"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item to="" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['counterMap']),
    badge() {
      const count = Object.values(this.counterMap).reduce((pre, next) => pre + next, 0);
      if (count > 99) {
        return '99+';
      }
      return count;
    },
  },
};
</script>

<style>
</style>
